import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export const useSystemStore = defineStore('system', () => {
  // 系统状态
  const loading = ref(false)
  const deviceType = ref<'desktop' | 'tablet' | 'mobile'>('desktop')
  const isOnline = ref(navigator.onLine)
  const sidebarCollapsed = ref(false)
  const theme = ref('light')
  const language = ref('zh-CN')
  
  // 缓存的视图
  const cachedViews = ref(['Dashboard'])
  
  // 系统信息
  const systemInfo = ref({
    title: 'CRM旅游管理系统',
    version: '3.0.0',
    author: 'CRM开发团队',
    description: '专为中老年旅游客户设计',
    framework: 'Vue 3 + Avue 3.x'
  })
  
  // 响应式断点
  const breakpoints = {
    xs: 375,
    sm: 768,
    md: 1024,
    lg: 1440,
    xl: 1920
  }
  
  // 计算属性
  const isMobile = computed(() => deviceType.value === 'mobile')
  const isTablet = computed(() => deviceType.value === 'tablet')
  const isDesktop = computed(() => deviceType.value === 'desktop')
  
  // Actions
  const setLoading = (value: boolean) => {
    loading.value = value
  }
  
  const setDevice = (device: 'desktop' | 'tablet' | 'mobile') => {
    deviceType.value = device
  }
  
  const setOnlineStatus = (status: boolean) => {
    isOnline.value = status
  }
  
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }
  
  const setSidebarCollapsed = (collapsed: boolean) => {
    sidebarCollapsed.value = collapsed
  }
  
  const setTheme = (newTheme: string) => {
    theme.value = newTheme
    document.documentElement.setAttribute('data-theme', newTheme)
  }
  
  const setLanguage = (newLanguage: string) => {
    language.value = newLanguage
  }
  
  const updateDeviceType = () => {
    const width = window.innerWidth
    
    if (width < breakpoints.sm) {
      deviceType.value = 'mobile'
    } else if (width < breakpoints.md) {
      deviceType.value = 'tablet'
    } else {
      deviceType.value = 'desktop'
    }
  }
  
  const addCachedView = (viewName: string) => {
    if (!cachedViews.value.includes(viewName)) {
      cachedViews.value.push(viewName)
    }
  }
  
  const removeCachedView = (viewName: string) => {
    const index = cachedViews.value.indexOf(viewName)
    if (index > -1) {
      cachedViews.value.splice(index, 1)
    }
  }
  
  const clearCachedViews = () => {
    cachedViews.value = ['Dashboard']
  }
  
  // 获取当前断点
  const getCurrentBreakpoint = () => {
    const width = window.innerWidth
    
    if (width < breakpoints.sm) return 'xs'
    if (width < breakpoints.md) return 'sm'
    if (width < breakpoints.lg) return 'md'
    if (width < breakpoints.xl) return 'lg'
    return 'xl'
  }
  
  // 检查是否为指定断点
  const isBreakpoint = (bp: keyof typeof breakpoints) => {
    return window.innerWidth >= breakpoints[bp]
  }
  
  // 初始化
  const init = () => {
    updateDeviceType()
    setTheme(theme.value)
  }
  
  return {
    // State
    loading,
    deviceType,
    isOnline,
    sidebarCollapsed,
    theme,
    language,
    cachedViews,
    systemInfo,
    breakpoints,
    
    // Getters
    isMobile,
    isTablet,
    isDesktop,
    
    // Actions
    setLoading,
    setDevice,
    setOnlineStatus,
    toggleSidebar,
    setSidebarCollapsed,
    setTheme,
    setLanguage,
    updateDeviceType,
    addCachedView,
    removeCachedView,
    clearCachedViews,
    getCurrentBreakpoint,
    isBreakpoint,
    init
  }
}, {
  persist: {
    key: 'crm-system-store',
    storage: localStorage,
    paths: ['sidebarCollapsed', 'theme', 'language', 'cachedViews']
  }
})